<template>
  <div>
    <header>
      <div class="div" @click="back">
        <img src="../../assets/返回.png" alt="">
        <span>返回</span>
      </div>
      <div class="div">我的待签约</div>
      <div class="div"></div>
    </header>
    <div class="content">
      <van-empty
        style="width: 100%;height: 100%"
        v-if="noAddList.length === 0"
        class="custom-image"
        description="暂无待签约信息~"
        :image="require('../../assets/暂无数据.png')"
      >
      </van-empty>
      <ul v-for="(item, index) in noAddList" :key="index">
        <li class="li_left" :class="[item.sex === 1 ? 'nan' : 'nv']">
<!--          && item.ROLE === 1 -->
          <img src="../../assets/男医生@2x.png" v-show="item.sex===1 && item.ROLE === 2 " alt="">
          <img src="../../assets/女医生@2x.png" v-show="item.sex===2 && item.ROLE === 2 " alt="">
          <img src="../../assets/男医生@2x.png" v-show="item.sex===1 && item.ROLE === 3 " alt="">
          <img src="../../assets/女医生@2x.png" v-show="item.sex===2 && item.ROLE === 3 " alt="">
          <img src="../../assets/男患者@2x.png" v-show="item.sex===1 && item.ROLE === 1" alt="">
          <img src="../../assets/女患者@2x.png" v-show="item.sex===2 && item.ROLE === 1" alt="">
        </li>
        <li class="li_content">
          <p>姓名: {{item.NICK_NAME}}</p>
          <p>电话: {{item.PHONE}}</p>
        </li>
        <li class="li_right">
          <button @click="clickAgree(item.id)">同意</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import {Toast} from 'vant'
export default {
  name: 'NoAdd',
  data () {
    return {
      from_user_id: '',
      noAddList: []
    }
  },
  mounted () {
    // 截取网址后的userid
    this.from_user_id = this.$utils.getUrlKey('userid')
    $('.content').css('height', $(window).height() - $('.content').offset().top + 'px')
    this.getNoAdd(this.from_user_id)
  },
  methods: {
    // 点击返回
    back () {
      window.history.go(-1)
    },
    getNoAdd (id) {
      this.$http.findDaiqianyueDoctor({from_user_id: id})
        .then(res => {
          console.log(res)
          this.noAddList = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击同意
    clickAgree (id) {
      this.$http.updateFriend({id: id})
        .then(res => {
          console.log(res)
          this.getNoAdd(this.from_user_id)
          Toast('操作成功')
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;
}

  //header{

  //}
  //header .div{

  //}
header{
    height: 12vw;
    display: flex;
    align-items: center;
  .div{
      width: 33%;
      display: flex;
      align-items: center;
  }
}
  header .div:nth-child(1){
    font-size: 15px;
    font-weight: bold;
    font-family: "PingFang SC";
    color: #1da4f2;
  }
  header .div:nth-child(2){
    font-size: 15px;
    font-weight: bold;
    font-family: "PingFang SC";
    color: #333333;
    justify-content: center;
  }
  header .div:nth-child(1) img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  .content{
    background: #FAF9FE;
    overflow: auto;
  }
  .content ul{
    display: flex;
    width: 92vw;
    height: 80px;
    background: #FFFFFF;
    border-radius: 10px;
    margin: 10px auto auto auto;
    overflow: hidden;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .content ul .li_left{
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .content ul .li_left img{
    width: 60px;
    height: 60px;
  }
  .content ul .li_content{
    width: 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-left: 10px;
  }
  .content ul .li_content p{
    margin-bottom: 5px;
  }
  .content ul .li_right{
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .content ul .li_right button{
    width: 60px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: #1DA4F2;
    border-radius: 14px;
    border: 1px solid #1da4f2;
  }
  .nv {
    background: rgba(255, 227, 247, 1);
  }
  .nan {
    background: rgba(205, 239, 255, 1);
  }
  /deep/ .van-empty__image {
    width: 160px;
    height: 100px;
  }
  /deep/ .van-empty__image img {
    width: 160px;
    height: 100px;
  }
  /deep/ .van-empty{
    width: 100%;
    height: 80vh !important;
  }
</style>
